import React from 'react'
import { Link } from 'react-router-dom'

interface CompanionCardProps {
  id: string
  name: string
  avatar: string
  cover: string
  description: string
  tags: string[]
  isPremium?: boolean
  subscriptionPrice: string
  videoCount: number
  subscriberCount: number
}

const CompanionCard: React.FC<CompanionCardProps> = ({
  id,
  name,
  avatar,
  cover,
  description,
  tags,
  isPremium = false,
  subscriptionPrice,
  videoCount,
  subscriberCount,
}) => {
  return (
    <Link to={`/ai-companion/${id}`}>
      <div className="bg-card-dark rounded-2xl overflow-hidden shadow-lg mb-5">
        <div className="relative h-[180px]">
          <img
            src={cover}
            alt={name}
            className="w-full h-full object-cover"
          />
          {isPremium && (
            <div className="absolute top-2.5 right-2.5 bg-primary text-white text-xs font-bold px-2 py-1 rounded-xl">
              <i className="fas fa-crown mr-1"></i> Premium
            </div>
          )}
          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent p-4">
            <h3 className="font-bold text-lg">{name}</h3>
            <p className="text-sm text-gray-300">{tags.join(' • ')}</p>
          </div>
          <div className="absolute -bottom-10 left-4 w-20 h-20 rounded-full border-2 border-primary bg-card-dark overflow-hidden">
            <img
              src={avatar}
              alt={name}
              className="w-full h-full object-cover"
            />
          </div>
        </div>
        <div className="pt-12 px-4 pb-4">
          <p className="text-sm text-gray-400 mb-3">{description}</p>
          <div className="flex justify-between mb-3">
            <div>
              <p className="text-gray-400 text-xs">SUBSCRIPTION</p>
              <p className="font-bold">{subscriptionPrice}</p>
            </div>
            <button className="bg-gradient-to-r from-primary to-primary-gradient-end text-white px-6 py-2 rounded-full text-sm font-bold">
              Subscribe
            </button>
          </div>
        </div>
        <div className="flex justify-between px-4 py-3 border-t border-white/10 text-xs text-gray-400">
          <span><i className="fas fa-video mr-1"></i> {videoCount} videos</span>
          <span><i className="fas fa-users mr-1"></i> {subscriberCount.toLocaleString()} subscribers</span>
        </div>
      </div>
    </Link>
  )
}

export default CompanionCard 